<template>
  <div class="home">
    <h1>主页组件</h1>
    <h1>主页使用vuex的数据：{{$store.state.count}}</h1>
    <h1>渲染布尔值:{{$store.state.flag}}</h1>
    <h1>使用vuex中的getters 注入到computed属性使用：{{myage}}</h1>
    <button @click="chufa">每次加5</button>
    <button @click="change">改变state中的flag值</button>
    <ul>
      <li v-for="(item,index) in list"
          :key="index">
        {{item}}
      </li>
    </ul>
    <h1>{{username}}</h1>
    <h1>{{$store.state.movies}}</h1>
    <button @click="moviesChangeActions('速度与激情')">改变电影</button>
    <hr>
    <!--  使用模块中带有命名空间的state数据 -->
    <h1>{{$store.state.FsStore.fid}}</h1>
    <button @click="mokuai">触发模块中的mutations</button>
    <button @click="mAction">触发模块中的actions111</button>
    <hr>
    <van-button type="primary"
                block
                plain
                to="/about"
                loading
                @click="say()"
                round>
      你好
      <template #loading>
        <div>
          <svg xmlns="http://www.w3.org/2000/svg"
               version="1.1">
            <circle cx="100"
                    cy="80"
                    r="10"
                    stroke="black"
                    stroke-width="2"
                    fill="red" />
          </svg>
          <!-- <img src="//img11.360buyimg.com/seckillcms/s600x300_jfs/t1/151296/9/12750/19662/5fe950fbE186023c0/6a66749fd773929d.png!cc_300x150.webp"
               alt=""> -->
        </div>
      </template>
    </van-button>
    <div class="mywrap">
      <van-button type="primary"
                  plain
                  round
                  icon="//img11.360buyimg.com/seckillcms/s600x300_jfs/t1/151296/9/12750/19662/5fe950fbE186023c0/6a66749fd773929d.png!cc_300x150.webp">
        你好
      </van-button>
    </div>
    <div style="margin-bottom:300px;"></div>,
  </div>
</template>

<script>
// vuex的 辅助函数使用法
// mapState 可以把state中的数据注入到计算属性和data 
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: "Home",
  data () {
    return {}
  },
  computed: {
    // 使用mapState辅助函数 把state中的数据注入到计算属性
    // ...mapState({
    //   list: state => state.list,
    //   username: state => state.username
    // }),
    ...mapState(['list', 'username']),
    // props:["mm","cc"],
    // props: {
    //   mm: {
    //     type: String,
    //     default: 88
    //   }
    // },
    myage () {//把getters中的数据 放到本组件的计算属性
      return this.$store.getters.myage * 2
    }
  },
  methods: {
    ...mapActions(["moviesChangeActions"]),
    ...mapActions("FsStore", ["fidActions"]),
    ...mapMutations("FsStore", ["changeFid"]),
    chufa () {
      // 触发vuex中mutations 的changeCount函数 从而改变state中的count 加5
      this.$store.commit("changeCount", 5)
    },
    change () {
      // 通过mutations触发改变flag
      // this.$store.commit("changeFlag", false)
      // 通过触发actions改变flag  通过dispatch触发
      this.$store.dispatch("flagChangeActions", false)
    },
    mokuai () {
      // 触发模块中的mutations
      // this.$store.commit("FsStore/changeFid", 888)
      this.changeFid(888)  //辅助函数导入的模块中的方法
    },
    mAction () {
      // 触发模块中的actions 
      // this.$store.dispatch("FsStore/fidActions", 999)
      this.fidActions(999)
    },
    say (e) {
      console.log(e)
    }
  },
};
</script>
<style lang="less">
.mywrap .van-button {
  background: red !important;
}
.mywrap .van-button__text {
  color: white;
}
</style>
